<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>五十音</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body topmargin="0" oncontextmenu="return false" ondragstart="return false" onselectstart ="return false" onbeforecopy="return false">
  <main class="main">
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="a"></div>
        <div class="item-texts">
          <div class="item-text a">あ</div>
          <div class="item-text b">ア</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="i"></div>
        <div class="item-texts">
          <div class="item-text a">い</div>
          <div class="item-text b">イ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="u"></div>
        <div class="item-texts">
          <div class="item-text a">う</div>
          <div class="item-text b">ウ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="e"></div>
        <div class="item-texts">
          <div class="item-text a">え</div>
          <div class="item-text b">エ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="o"></div>
        <div class="item-texts">
          <div class="item-text a">お</div>
          <div class="item-text b">オ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ka"></div>
        <div class="item-texts">
          <div class="item-text a">か</div>
          <div class="item-text b">カ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ki"></div>
        <div class="item-texts">
          <div class="item-text a">き</div>
          <div class="item-text b">キ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ku"></div>
        <div class="item-texts">
          <div class="item-text a">く</div>
          <div class="item-text b">ク</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ke"></div>
        <div class="item-texts">
          <div class="item-text a">け</div>
          <div class="item-text b">ケ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ko"></div>
        <div class="item-texts">
          <div class="item-text a">こ</div>
          <div class="item-text b">コ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="sa"></div>
        <div class="item-texts">
          <div class="item-text a">さ</div>
          <div class="item-text b">サ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="shi"></div>
        <div class="item-texts">
          <div class="item-text a">し</div>
          <div class="item-text b">シ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="su"></div>
        <div class="item-texts">
          <div class="item-text a">す</div>
          <div class="item-text b">ス</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="se"></div>
        <div class="item-texts">
          <div class="item-text a">せ</div>
          <div class="item-text b">セ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="so"></div>
        <div class="item-texts">
          <div class="item-text a">そ</div>
          <div class="item-text b">ソ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ta"></div>
        <div class="item-texts">
          <div class="item-text a">た</div>
          <div class="item-text b">タ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="chi"></div>
        <div class="item-texts">
          <div class="item-text a">ち</div>
          <div class="item-text b">チ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="tsu"></div>
        <div class="item-texts">
          <div class="item-text a">つ</div>
          <div class="item-text b">ツ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="te"></div>
        <div class="item-texts">
          <div class="item-text a">て</div>
          <div class="item-text b">テ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="to"></div>
        <div class="item-texts">
          <div class="item-text a">と</div>
          <div class="item-text b">ト</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="na"></div>
        <div class="item-texts">
          <div class="item-text a">な</div>
          <div class="item-text b">ナ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ni"></div>
        <div class="item-texts">
          <div class="item-text a">に</div>
          <div class="item-text b">ニ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="nu"></div>
        <div class="item-texts">
          <div class="item-text a">ぬ</div>
          <div class="item-text b">ヌ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ne"></div>
        <div class="item-texts">
          <div class="item-text a">ね</div>
          <div class="item-text b">ネ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="no"></div>
        <div class="item-texts">
          <div class="item-text a">の</div>
          <div class="item-text b">ノ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ha"></div>
        <div class="item-texts">
          <div class="item-text a">は</div>
          <div class="item-text b">ハ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="hi"></div>
        <div class="item-texts">
          <div class="item-text a">ひ</div>
          <div class="item-text b">ヒ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="fu"></div>
        <div class="item-texts">
          <div class="item-text a">ふ</div>
          <div class="item-text b">フ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="he"></div>
        <div class="item-texts">
          <div class="item-text a">へ</div>
          <div class="item-text b">ヘ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ho"></div>
        <div class="item-texts">
          <div class="item-text a">ほ</div>
          <div class="item-text b">ホ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ma"></div>
        <div class="item-texts">
          <div class="item-text a">ま</div>
          <div class="item-text b">マ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="mi"></div>
        <div class="item-texts">
          <div class="item-text a">み</div>
          <div class="item-text b">ミ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="mu"></div>
        <div class="item-texts">
          <div class="item-text a">む</div>
          <div class="item-text b">ム</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="me"></div>
        <div class="item-texts">
          <div class="item-text a">め</div>
          <div class="item-text b">メ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="mo"></div>
        <div class="item-texts">
          <div class="item-text a">も</div>
          <div class="item-text b">モ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ya"></div>
        <div class="item-texts">
          <div class="item-text a">や</div>
          <div class="item-text b">ヤ</div>
        </div>
      </div>
      <div class="row-item low">
        <div class="item-roman" roman="i"></div>
        <div class="item-texts">
          <div class="item-text a">い</div>
          <div class="item-text b">イ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="yu"></div>
        <div class="item-texts">
          <div class="item-text a">ゆ</div>
          <div class="item-text b">ユ</div>
        </div>
      </div>
      <div class="row-item low">
        <div class="item-roman" roman="e"></div>
        <div class="item-texts">
          <div class="item-text a">え</div>
          <div class="item-text b">エ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="yo"></div>
        <div class="item-texts">
          <div class="item-text a">よ</div>
          <div class="item-text b">ヨ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ra"></div>
        <div class="item-texts">
          <div class="item-text a">ら</div>
          <div class="item-text b">ラ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ri"></div>
        <div class="item-texts">
          <div class="item-text a">り</div>
          <div class="item-text b">リ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ru"></div>
        <div class="item-texts">
          <div class="item-text a">る</div>
          <div class="item-text b">ル</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="re"></div>
        <div class="item-texts">
          <div class="item-text a">れ</div>
          <div class="item-text b">レ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ro"></div>
        <div class="item-texts">
          <div class="item-text a">ろ</div>
          <div class="item-text b">ロ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="wa"></div>
        <div class="item-texts">
          <div class="item-text a">わ</div>
          <div class="item-text b">ワ</div>
        </div>
      </div>
      <div class="row-item low">
        <div class="item-roman" roman="i"></div>
        <div class="item-texts">
          <div class="item-text a">い</div>
          <div class="item-text b">イ</div>
        </div>
      </div>
      <div class="row-item low">
        <div class="item-roman" roman="u"></div>
        <div class="item-texts">
          <div class="item-text a">う</div>
          <div class="item-text b">ウ</div>
        </div>
      </div>
      <div class="row-item low">
        <div class="item-roman" roman="e"></div>
        <div class="item-texts">
          <div class="item-text a">え</div>
          <div class="item-text b">エ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="o"></div>
        <div class="item-texts">
          <div class="item-text a">を</div>
          <div class="item-text b">ヲ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="n"></div>
        <div class="item-texts">
          <div class="item-text a">ん</div>
          <div class="item-text b">ン</div>
        </div>
      </div>
      <div class="row-item"></div>
      <div class="row-item"></div>
      <div class="row-item"></div>
      <div class="row-item"></div>
    </section>


    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ga"></div>
        <div class="item-texts">
          <div class="item-text a">が</div>
          <div class="item-text b">ガ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="gi"></div>
        <div class="item-texts">
          <div class="item-text a">ぎ</div>
          <div class="item-text b">ギ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="gu"></div>
        <div class="item-texts">
          <div class="item-text a">ぐ</div>
          <div class="item-text b">グ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ge"></div>
        <div class="item-texts">
          <div class="item-text a">げ</div>
          <div class="item-text b">ゲ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="go"></div>
        <div class="item-texts">
          <div class="item-text a">ご</div>
          <div class="item-text b">ゴ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="za"></div>
        <div class="item-texts">
          <div class="item-text a">ざ</div>
          <div class="item-text b">ザ</div>
        </div>
      </div>
      <div class="row-item red">
        <div class="item-roman" roman="zi/ji"></div>
        <div class="item-texts">
          <div class="item-text a">じ</div>
          <div class="item-text b">ジ</div>
        </div>
      </div>
      <div class="row-item hotpink">
        <div class="item-roman" roman="zu"></div>
        <div class="item-texts">
          <div class="item-text a">ず</div>
          <div class="item-text b">ズ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="ze"></div>
        <div class="item-texts">
          <div class="item-text a">ぜ</div>
          <div class="item-text b">ゼ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="zo"></div>
        <div class="item-texts">
          <div class="item-text a">ぞ</div>
          <div class="item-text b">ゾ</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="da"></div>
        <div class="item-texts">
          <div class="item-text a">だ</div>
          <div class="item-text b">ダ</div>
        </div>
      </div>
      <div class="row-item red">
        <div class="item-roman" roman="di"></div>
        <div class="item-texts">
          <div class="item-text a">ぢ</div>
          <div class="item-text b">ヂ</div>
        </div>
      </div>
      <div class="row-item hotpink">
        <div class="item-roman" roman="du"></div>
        <div class="item-texts">
          <div class="item-text a">づ</div>
          <div class="item-text b">ヅ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="de"></div>
        <div class="item-texts">
          <div class="item-text a">で</div>
          <div class="item-text b">デ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="do"></div>
        <div class="item-texts">
          <div class="item-text a">ど</div>
          <div class="item-text b">ド</div>
        </div>
      </div>
    </section>
    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="ba"></div>
        <div class="item-texts">
          <div class="item-text a">ば</div>
          <div class="item-text b">バ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="bi"></div>
        <div class="item-texts">
          <div class="item-text a">び</div>
          <div class="item-text b">ビ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="bu"></div>
        <div class="item-texts">
          <div class="item-text a">ぶ</div>
          <div class="item-text b">ブ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="be"></div>
        <div class="item-texts">
          <div class="item-text a">べ</div>
          <div class="item-text b">ベ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="bo"></div>
        <div class="item-texts">
          <div class="item-text a">ぼ</div>
          <div class="item-text b">ボ</div>
        </div>
      </div>
    </section>

    <section class="row">
      <div class="row-item">
        <div class="item-roman" roman="pa"></div>
        <div class="item-texts">
          <div class="item-text a">ぱ</div>
          <div class="item-text b">パ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="pi"></div>
        <div class="item-texts">
          <div class="item-text a">ぴ</div>
          <div class="item-text b">ピ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="pu"></div>
        <div class="item-texts">
          <div class="item-text a">ぷ</div>
          <div class="item-text b">プ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="pe"></div>
        <div class="item-texts">
          <div class="item-text a">ぺ</div>
          <div class="item-text b">ペ</div>
        </div>
      </div>
      <div class="row-item">
        <div class="item-roman" roman="po"></div>
        <div class="item-texts">
          <div class="item-text a">ぽ</div>
          <div class="item-text b">ポ</div>
        </div>
      </div>
    </section>
  </main>
</body>
</html>